<template>
	<view class="notify">
		<view class="promotion-center">
			<view class="tj-sction">
				<!-- 轮播图1 -->
				<view class="swiper">
					<view class="swiper-box" style="color: white;">
						<p>尊敬的客服经理：{{userInfo&&userInfo.nickname}}</p>
						<p>欢迎您来到"黔彩"移动办公平台</p>
						<p>您今日已完成的工作任务<text style="color: #0df055;">{{finished}}</text>项，依需完成<text style="color: #ffec14;" >{{unFinished}}</text>项</p>
					</view>
			</view>
		</view>
		<view class="notify-list">
			<view class="row" @tap="navTo(1)">
			
					<view class="notify-wrapper">
						<span style="font-size: 18px;font-weight: 500;" @click="toPlans">走访计划</span>
						<view style="float: right; width: 15px; height: 15px; font-size: 15px;background-size:contain; background-image: url(../../static/right_icon.png);" ></view>
						<view class="title in3line">
							<table border="0" style="margin: 0 auto; text-align: center;width: 350px;height: 90px;">
							<tr  style="height:50px;">
							  <td >
								  <view>季度拜访计划</view>
								  <view style="font-weight:1000;font-size: 20px;">{{userInfo&&userInfo.complete}}/{{userInfo&&userInfo.complete}}</view>
							  </td>
							  <td>
								  <view>今日已拜访(户)</view>
								  <view style="font-weight:1000;font-size: 20px;">{{finished}}</view>
							 </td>
								<td>
								  <view>仍需拜访(户)</view>
								  <view style="font-weight:1000;font-size: 20px;">{{unFinished}}</view>
							 	</td>
							</tr>
							</table>
						</view>
					</view>


				
			</view>
			<view class="row" @tap="navTo(2)">
			
					<view class="notify-wrapper">
						<view class="title in3line">
							<table border="0" style="margin: 0 auto; text-align: center;width: 350px;height: 90px;">
							<tr>
							  
							  <td>
							    <view>管辖客服</view>
							    <view style="font-weight:1000;font-size: 20px;">{{custNum}}</view>
							  </td>
							  <td>
							    <view>今日扫码(户)</view>
							    <view style="font-weight:1000;font-size: 20px;">{{todayScanNum}}</view>
							  </td>
							  <td>
							    <view>昨日扫码达标(户)</view>
							    <view style="font-weight:1000;font-size: 20px;">{{yesterdayScanNum}}</view>
							  </td>
							</tr>
							
							</table>
						</view>
					


				</view>
			</view>
			<!-- <view class="row">
				<view class="notify-wrapper " style="height: 450px;">
				
				
					<view class="charts-box;position:absolute">
						<qiun-data-charts type="ring" :opts="{legend:{position: 'right'},extra:{ring:{ringWidth: 20,linearType:'custom',centerColor:'#FF0'}}}" :chartData="chartsDataPie2"/>
						
					</view>	
				
				</view>
			</view> -->
		</view>
		 <view class="charts-box2">
			<!-- <qiun-title-bar title="客户定烟汇总"/> -->
			<span style="font-size: 18px;font-weight: 500;">客户订烟汇总</span>
			<view class="charts-box">
			 <qiun-data-charts type="ring" :opts="{legend:{position: 'right'},extra:{ring:{ringWidth: 10,linearType:'custom',centerColor:'white'}}}" :chartData="optionsData"/>
			
			</view>
		</view>

</view>


	</view>

</template>

<script>
	
	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	import demodata from '@/mockdata/demodata.json';
	
	import {http} from '@/utils/request/index.js';
	import moment from '@/common/moment';
	import listCell from '@/components/oa-list-cell';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import oaSwipeDot from '@/components/oa-swipe-dot';
	import rfSwiperSlide from '@/components/oa-swiper-slide';
	import qiunTitleBar from '@/components/qiun-title-bar/qiun-title-bar';
	
	
	export default {

	data() {
		return {
			 finished:0,
			 unFinished:0,
			 slsmanCode:"",
			  chartsDataPie2: {},
			  optionsData:{},
			  ringOpts:{},
			  todayOrder:0,
			  todayQCYOrder:0,
			  todayXSMOrder:0,
			  custNum:0,
			  todayScanNum:0,
			  yesterdayScanNum:0,
		  }
		},
		filters: {
			notifyTypeFilter(val) {
				return '公告';
			}
		},
		onLoad(options){
			console.log("onload options",options)	
			if(options.slsmanCode){
				this.slsmanCode  = options.slsmanCode
				this.$store.dispatch("getUserInfo",options.slsmanCode)
			}	
		},
		onShow(options) {
		
			this.initData();
		},
		computed: {
			...mapState(['userInfo']),
			bottom() {
				let bottom = 0;
				/*  #ifdef H5  */
				bottom = 90;
				/*  #endif */
				return bottom;
			}
		},
		components:{
			qiunTitleBar
		},
		onReady() {
		 
		  setTimeout(() => {
		    
		    //测试动态绑定的eopts
		    this.ringOpts={
		      color:['#FF00FF','#AAFF11'],
		      legend:{show:false}
		    }
		  }, 5000);
		},
		methods: {
			getStatistic(){
				http.get("oaPlanExecute/workbenchGetSlsmanCustOrderInfo",{
					slsmanCode:this.slsmanCode
				}).then(res=>{
						this.todayOrder = res.result.data.todayOrder
						this.todayQCYOrder= res.result.data.todayQCYOrder
						this.todayXSMOrder= res.result.data.todayXSMOrder
						
						this.optionsData = {
							series:[
								{
									data:[
										{
											name:"未定烟",
											value:Number(this.todayOrder)
										},
										{
											name:"黔彩云定烟",
											value:Number(this.todayQCYOrder)
										},
										{
											name:"新商盟定烟",
											value:Number(this.todayXSMOrder)
										}
								],
							}
							]
						}
						
						console.log("aaaaa",this.optionsData)
						
				})
				
				http.get("oaPlanExecute/workbenchGetSlsmanCustInfo",{
					slsmanCode:this.slsmanCode
				}).then(res=>{
						this.custNum = res.result.data.custNum
						this.todayScanNum= res.result.data.todayScanNum
						this.yesterdayScanNum= res.result.data.yesterdayScanNum
						
						
				})
				
				
				http.get("oaPlanExecute/homeData",{
					slsmanCode:this.slsmanCode
				}).then(res=>{
						console.log("homeData",res)
						this.finished = res.result.finished
						this.unFinished = res.result.unFinished
				})
				
				
				
				
			},
			
			toPlans(){
				uni.navigateTo({
					url:"/pages/attend/add"
				})
			},
			initData() {
				 this.getStatistic()
				 
				 console.log(JSON.parse(JSON.stringify(demodata.PieA)))
				// this.chartsDataPie2=JSON.parse(JSON.stringify(demodata.PieA))
			},
			// 监听轮播图切换
			handleDotChange(e) {
				this.current = e.detail.current;
			},
			// 数据初始化
			// initData() {
			// 	uni.setNavigationBarColor({
			// 		frontColor: '#ffffff',
			// 		backgroundColor: this.themeColor.color,
			// 		animation: {
			// 			duration: 400,
			// 			timingFunc: 'easeIn'
			// 		}
			// 	})
			// },

			// 通用跳转
			async navTo(item) {
				this.$mRouter.push({
					route: `/pages/plans/plans?id=${item}`
				});
			},

		}
	};
</script>
<style lang="scss" scoped>
	page {
		background-color: $page-color-base;
	}

	/*轮播图*/
	.swiper {
		width: 100%;
		display: flex;
		position: relative;
		justify-content: center;

		.swiper-box {
			width: 100%;
			height: 40vw;
			overflow: hidden;
			background-color: #3eb5ff;
			//兼容ios，微信小程序
			position: relative;
			z-index:1;

			p {
				margin-top: 3%;
				margin-left: 8%;
				font-size: 15px;
				position: relative;
			}

			swiper {
				width: 100%;
				height: 40vw;
				position: relative;


			}
		}
	}

	.notify {
	   
		.notify-list {
		
			
			
			
			.row {
				width: calc(100%);
				height: calc(20vw + 150upx);
				display: flex;
				position: absolute;
				align-items: center;
				position: relative;
				overflow: hidden;
				top:-50px;
				z-index:5;
				.carrier {
				
					background-color: #fff;
					position: relative;
					width: 100%;
					padding: 0 0;
					height: 100%;
					
					align-items: center;
				}
			}

			.notify-wrapper {
				background-color: $color-white;
				width: 90%;
				height: 80%;
				padding: 10px;
				box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
				margin-left: 4%;
				margin-top: 2%;
				border-radius: 15upx;
				
				position: absolute;
				
			}
		}

		
	}
	table {
	
	 border-collapse:collapse;
	
	 }
	 span {
	 	width: 50px;
	 	margin-left:5%;
	 	font-size: 20px;
		font-weight: bolder;
	 }	
	.charts-box {
	  width: 100%;
	  height: 300px;
	}
	.charts-box2{
		background-color: #fff;
		width: 90%;
		
		padding: 10px;
		box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
		margin-left: 4%;
		border-radius: 8px;
		position: absolute;
	}
</style>
